<body class="height-100">
<app-navigation></app-navigation>
<br>
<br>
<h1 class="mat-headline-3 center-horizontal">Input tags</h1>
<div class="width-100 overflow-scroll-y flex-row">
  <div *ngFor="let tag of inputTags;let i=index" class="width-30">
    <div class="padding width-100">
      <mat-card>
        <div class="flex-row width-100">
          <div class="width-70 center-left">
            <mat-card-header>
              <mat-card-title>{{tag.tagName}}</mat-card-title>
              <mat-card-subtitle>Driver: {{tag.driver}}</mat-card-subtitle>
            </mat-card-header>
            <mat-card-content>
              <p *ngIf="tag.type == 'Analog'">{{tag.lowLimit}} - {{tag.highLimit}} <b>[{{tag.units}}]</b></p>
              <p *ngIf="tag.type == 'Digital'">----------</p>
              <p>{{tag.description}}</p>
            </mat-card-content>
          </div>
          <div class="flex-column width-30 padding">
            <div class="width-100">
              <div class="center-horizontal flex-row">
                <h4 class="center-vertical">Scanning:</h4>
                <mat-checkbox class="center-vertical width-exact" id="{{tag.tagName}}" style="text-align: left" [checked]="tag.isOn"></mat-checkbox>
              </div>
              <br>
              <br>
            </div>
            <button mat-raised-button color="primary" id="{{tag.tagName}}" class="width-70 center-horizontal" (click)="changeValue($event)">Change</button>
          </div>
        </div>
        <h2 class="center-horizontal">Alarms:</h2>
        <div class="flex-column border padding margin">
          <table>
            <thead>
            <tr>
              <th>Type</th>
              <th>Priority</th>
              <th>Limit</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let alarm of tag.alarms;let j=index">
              <td>{{alarm.type}}</td>
              <td>{{alarm.priority}}</td>
              <td>{{alarm.limit}}</td>
              <td><button mat-raised-button color="warn" class="center-horizontal" id="{{'a' + alarm.id}}" (click)="deleteAlarm($event)">Delete</button></td>
            </tr>
            </tbody>
          </table>
        </div>
        <br>
        <div class="flex-column border padding margin" [id]="'form-' + i">
          <form [formGroup]="alarmCreationForm[i]">
            <mat-form-field style="margin-right: 15px">
              <mat-label>Type:</mat-label>
              <mat-select formControlName="type">
                <mat-option *ngFor="let type of alarmTypes" [value]="type">{{type}}</mat-option>
              </mat-select>
              <mat-error *ngIf="alarmCreationForm[i].controls['type'].hasError('required')">
                Type is <strong>required</strong>
              </mat-error>
            </mat-form-field>
            <mat-form-field style="margin-right: 15px">
              <mat-label>Priority:</mat-label>
              <mat-select formControlName="priority">
                <mat-option *ngFor="let priority of priorities" [value]="priority">{{priority}}</mat-option>
              </mat-select>
              <mat-error *ngIf="alarmCreationForm[i].controls['priority'].hasError('required')">
                Priority is <strong>required</strong>
              </mat-error>
            </mat-form-field>
            <mat-form-field style="margin-right: 15px">
              <mat-label>Limit</mat-label>
              <input matInput formControlName="limit">
              <mat-error *ngIf="alarmCreationForm[i].controls['limit'].hasError('required')">
                Limit is <strong>required</strong>
              </mat-error>
            </mat-form-field>
            <button mat-raised-button color="accent" type="submit" class="center-horizontal" (click)="newAlarm(i)">Add alarm</button>
          </form>
        </div>
        <button mat-raised-button color="warn" class="center-horizontal" id="{{tag.tagName}}" (click)="delete($event)">Delete tag</button>
        <br>
      </mat-card>
    </div>
  </div>
</div>
<button mat-raised-button class="stick-to-bottom center-horizontal" color="accent" (click)="showAddForm()">Add input tag</button>
<div class="overlay width-100 height-100 z-index-higher" *ngIf="showForm">
  <form [formGroup]="tagCreationForm" style="top:15%;position: relative" class="center-horizontal">
    <div class="width-50 height-80 card center-horizontal padding">
      <div class="flex-row">
        <div class="height-100 width-50">
          <mat-form-field class="width-70">
            <mat-label>Tag Type</mat-label>
            <mat-select (selectionChange)="typeChanged($event.value)" formControlName="tagType">
              <mat-option *ngFor="let type of types" [value]="type">{{type}}</mat-option>
            </mat-select>
            <mat-error *ngIf="tagCreationForm.controls['tagType'].hasError('required')">
              Tag Type is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="width-70">
            <mat-label>Tag Name</mat-label>
            <input matInput formControlName="tagName">
            <mat-error *ngIf="tagCreationForm.controls['tagName'].hasError('required')">
              Tag Name is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="width-70">
            <mat-label>Driver</mat-label>
            <mat-select (selectionChange)="driverChanged($event.value)" formControlName="driver">
              <mat-option *ngFor="let driver of drivers" [value]="driver">{{driver}}</mat-option>
            </mat-select>
            <mat-error *ngIf="tagCreationForm.controls['driver'].hasError('required')">
              Driver is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="width-70">
            <mat-label>Description</mat-label>
            <textarea matInput formControlName="description"></textarea>
            <mat-error *ngIf="tagCreationForm.controls['description'].hasError('required')">
              Description is <strong>required</strong>
            </mat-error>
          </mat-form-field>
        </div>
        <div class="height-100 width-50">
          <mat-form-field class="width-70">
            <mat-label>Address</mat-label>
            <mat-select formControlName="address">
              <mat-option *ngFor="let address of addresses" [value]="address">{{address}}</mat-option>
            </mat-select>
            <mat-error *ngIf="tagCreationForm.controls['address'].hasError('required')">
              Address is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="width-70">
            <mat-label>Low Limit</mat-label>
            <input matInput [disabled]="isDigitalChosen" formControlName="lowLimit">
            <mat-error *ngIf="tagCreationForm.controls['lowLimit'].hasError('required')">
              Low Limit is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="width-70">
            <mat-label>High Limit</mat-label>
            <input matInput [disabled]="isDigitalChosen" formControlName="highLimit">
            <mat-error *ngIf="tagCreationForm.controls['highLimit'].hasError('required')">
              High Limit is <strong>required</strong>
            </mat-error>
          </mat-form-field>
          <mat-form-field class="width-70">
            <mat-label>Units</mat-label>
            <input matInput [disabled]="isDigitalChosen" formControlName="units">
            <mat-error *ngIf="tagCreationForm.controls['units'].hasError('required')">
              Units is <strong>required</strong>
            </mat-error>
          </mat-form-field>
        </div>
      </div>
      <mat-form-field class="center-horizontal width-40">
        <mat-label>Scan Time</mat-label>
        <input matInput formControlName="scanTime">
        <span matSuffix style="margin-right: 10px">ms</span>
        <mat-error *ngIf="tagCreationForm.controls['scanTime'].hasError('required')">
          Scan Time is <strong>required</strong>
        </mat-error>
      </mat-form-field>
      <br>
      <br>
      <button mat-raised-button style="margin-right: 20px" color="accent" type="submit" class="center-horizontal" (click)="add()">Add new input tag</button>
      <button mat-raised-button color="accent" type="button" class="center-horizontal" (click)="hideForm()">Close</button>
    </div>
  </form>
</div>
</body>

